<!DOCTYPE HTML>
<html lang="en-us">
<head>
	<title>jQueryTemplatizer: Examples and Documentation</title>
	
	<style type="text/css">
	body {
		font-family:Lucida Grande, Arial, sans-serif;
		line-height:1.6em;
	}
	
	p {
		line-height:1.6em
	}

.light {
	color:#666;
}

.container {
	width:960px;
	margin:0 auto;
}	
	.example {
		background:#eee;
		padding:.5em 1em;
		margin:2em 0;
		}
		
		.example > h1,h2,h3 {
			margin-top:0;
			}
		.example  p {
			margin-bottom:0;
		}

		#madlib.example {
			float:right;
			width:700px;
		
		}
		
		#madlib_form {
			float:left;
			width:220px;
		}
	
	</style>
	<meta charset="UTF-8">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

		<script type="text/javascript" src="http://projects.local/jQueryTemplatizer/jquery.templatizer.js"></script>
		<script type="text/javascript">

		$(function(){

			$.ajaxSetup ({
			    // Disable caching of AJAX responses */
			    cache: false
				});


			$.templatizer.load("jquery.templates.tpl.html #basic div.basic","basic");
			$.templatizer.load("jquery.templates.tpl.html #cryptids div.cryptid","cryptid");
			$.templatizer.load("jquery.templates.tpl.html #madlib1 div","madlib");



			$("#basic").templatizer({
				template:"basic",
				data:{
					title:"This is an example"
				}
				});
		

		});

		function duplicate() {
			// Append 'cryptid' template to #duplicate
			name = $("#duplicate_form input[name=name]").val()
			eats = $("#duplicate_form input[name=eats]").val()
			habitat = $("#duplicate_form input[name=habitat]").val()

			$("#duplicate").templatizer({
				template:"cryptid",
				data:{				
					name:name,
					eats:eats,
					habitat:habitat
					},append:true});
				}


		function madlib() {
			animal = $("#madlib_form input[name=animal]").val()
			name = $("#madlib_form input[name=name]").val()
			adjective = $("#madlib_form input[name=adjective]").val()
			verb = $("#madlib_form input[name=verb]").val()
			place = $("#madlib_form input[name=place]").val()
			fontsize = $("#madlib_form select[name=fontsize]").val()
			fontfamily = $("#madlib_form select[name=fontfamily]").val()
			color = $("#madlib_form input[name=color]").val()

			$("#madlib_form input").each(function(){
				if (!$(this).val()) {
					alert("You can't leave one blank!  It makes the madlib less funny.");
				}
			})

			// Call the templatizer
			$("#madlib").templatizer({
				template:"madlib",
				data:{
					animal:animal,
					name:name,
					adjective:adjective,
					verb:verb,
					place:place,
					size:fontsize,
					font:fontfamily,
					color:color
					}}); 

			
		}

		</script>


</head>
<body>
	
	
<div class="container">
	<h1>jQueryTemplatizer Examples</h1>

		<h2>Basic Example</h2>
	
		<p>The content you see below was rendered using jQueryTemplatizer.</p>

		<div id="basic" class="example">
		</div>

		<p>That's not much fun though.  Let's look at some examples you can actually interact with.</p>
		<h2>Duplicating Content</h2>
		
		<p>jQueryTemplatizer is most useful when you need to repeat templatized content.</p>
		
		<form id="duplicate_form">		
			<p>
				<label for="name">
					Animal<br/>
					<input type="text" name="name" value="Bigfoot"/>
				</label>
			</p>		
			<p>
				<label for="habitat">
					Habitat<br/>
					<input type="text" name="habitat" value="woods"/>
				</label>
			</p>		
			<p>
				<label for="eats">
					Diet<br/>
					<input type="text" name="eats" value="stuff"/>
				</label>
			</p>		
		
		
		<p><input type="button" value="Duplicate" onclick="duplicate()"/></p>
		</form>
		
			<div id="duplicate" class="example">
			</div>
			
		
		
		
		
		<h2>Madlibs</h2>
		<p>Here's a more sophisticated example.  We reuse some variables, replace attributes and more.  Fill in the following info:</p>


		<div id="madlib" class="example">

			<span class="light">Your madlib will show up here...</span>

		</div>


		<form id="madlib_form">
			<p><label for="animal">Animal<br/>
				<input type="text" name="animal" value="penguin"/></label></p>
				
			<p><label for="animal">Name<br/>
				<input type="text" name="name" value="Perseus"/></label></p>

			<p><label for="animal">Adjective<br/>
				<input type="text" name="adjective" value="stinky"/></label></p>

			<p><label for="animal">Verb<br/>
				<input type="text" name="verb" value="pole-vault"/></label></p>

			<p><label for="animal">Place<br/>
				<input type="text" name="place" value="Djibouti"/></label></p>
				
				<p>
					<label for="fontsize">Font size<br/>
					<select name="fontsize">
					<option value="12px">Small</option>
					<option value="15px">Regular</option>
					<option  value="22px">Large</option>
					</select>
					</label>					
				</p>

				<p>
					<label for="fontfamily">Font<br/>
						<select name="fontfamily">
						<option value="serif">Serif</option>
						<option value="sans-serif" selected>Sans-serif</option>
						<option  value="monospace">Monospace</option>
						</select>
					</label>					
				</p>

				<p>
					<label for="color">Font color (hex)<br/>
						<input type="text" name="color" value='#000000' />
					</label>					
				</p>


				<p><input type="button" value="Make a madlib" onclick="madlib()"/></p>
		</form>
		
</div>
</body>
</html>













